<template>
  <view class="hb-bg-white hb-p-3 hb-mb-3 hb-rounded-lg">
    <view class="hb-flex hb-items-center" @click="emits('audit')">
      <TmImage
        class="hb-flex-shrink-0"
        :src="item.iconFileUrl"
        :width="64"
        :height="64"
        :round="4"
      />
      <TmText
        _class="hb-flex-1 hb-mx-2 text-overflow-1 hb-font-bold"
        :label="item.applyName"
        :font-size="32"
      />
      <!-- 认证 -->
      <AuthenticationTag :certification-type="item.certificationType" />
    </view>
    <view
      class="hb-bg-[#F2F3F5] hb-p-2 hb-mt-2 hb-rounded-lg hb-flex hb-items-center"
      @click="emits('audit')"
    >
      <view class="hb-flex-1">
        <TmText
          _class="text-overflow-2"
          :label="item.applyContent || '无'"
          color="#646566"
          :font-size="28"
        />
      </view>
      <StatusTag class="hb-flex-shrink-0 hb-ml-3" :status="item.reviewStatus" type="friend" />
    </view>
    <view class="hb-mt-4 hb-flex hb-items-center hb-justify-end hb-gap-3">
      <TmButton
        :margin="[0, 0]"
        :padding="[0, 0]"
        label="联系TA"
        :round="16"
        :font-size="28"
        :height="64"
        :width="170"
        :follow-theme="false"
        color="#F2F3F5"
        @click.stop="handleContact"
      />
      <TmButton
        v-if="item.reviewStatus === ReviewStatusEnum.PENDING"
        :margin="[0, 0]"
        :padding="[0, 0]"
        label="审核"
        :round="16"
        :width="120"
        :font-size="28"
        :height="64"
        @click="emits('audit')"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
  import { FriendApplyListResult } from '@/api/contact/types';
  import { Toast } from '@/utils';
  import { ReviewStatusEnum } from '@/enums/PublicEnum';
  import StatusTag from './StatusTag.vue';

  defineOptions({
    name: 'FriendApplyItem',
  });

  const props = defineProps<{
    item: FriendApplyListResult;
  }>();

  const emits = defineEmits<{
    (e: 'audit'): void;
  }>();

  const handleContact = () => {
    if (props.item.applyPersonPhone) {
      uni.makePhoneCall({
        phoneNumber: props.item.applyPersonPhone,
      });
    } else {
      Toast('对方暂未填写联系方式');
    }
  };
</script>

<style scoped></style>
